<template>
    <div>
        <div v-if="attentionAreas&&attentionAreas.length>0">
            <el-row :gutter="20">
                <el-col :span="6" v-for="area in attentionAreas" :key="area.id">
                    <area-card class="area-card" :area="area"></area-card>
                </el-col>
            </el-row>
        </div>
        <div class="no-attention" v-else>
            您没有关注任何区域
        </div>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import AreaCard from '@/components/area/AreaCard'

    export default {
        name: 'attentionArea',
        components: {
            AreaCard
        },
        computed: {
            ...mapGetters('area', [
                'attentionAreas'
            ])
        }
    }
</script>

<style lang="scss" scoped>
    .area-card {
        margin: 20px 0;
    }

    .no-attention {
        height: 320px;
        line-height: 320px;
    }
</style>
